<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>考勤日期设置</title>
	<link rel="stylesheet" href="../css/calendar.css">
</head>

<body>
	<div id="vue-root">
		<div class="hint">
			<div class="back" @click="history.back()"></div>
			<div class="label">
				<span class="recess"></span>
				：代表放假
			</div>

			<button @click="submit">提交</button>
		</div>
		<div class="calendar">
			<div class="left">
				<div class="month_content" :style="{transform:'rotate('+(rotate-3)*-30+'deg)'}">
					<div class="month" v-for="month in 12" :key="month" @click="rotate=month"
						:class="{active:rotate==month}" :style="{left:250*Math.cos(Math.PI/6*(month-3))+280+'px',
						top:250*Math.sin(Math.PI/6*(month-3))+295+'px',transform:'rotate('+(rotate-3)*30+'deg)'}">
						{{month}}月
					</div>
				</div>
				<div class="year_content">
					<span class="triangle1" @click="setYear(-1)"></span>
					<span class="year">{{year}}</span>
					<span class="triangle2" @click="setYear(1)"></span>
				</div>
			</div>
			<div class="right">
				<div class="week_list">
					<div class="week" v-for="week in weeks" :key="week" v-text="week"></div>
				</div>
				<div class="date_list">
					<div class="dates" v-for="date in days" :key="date"></div>
					<div class="dates" v-for="date in dates" @click="toggle(date)">
						<span :class="{recess:recess(date)}" :key="rotate+'-'+date">{{date}}</span>
					</div>
				</div>
			</div>

		</div>

	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/js/common.js"></script>

	<script>
		var schoolId = top_params().id;
		var date = new Date();
		var year = date.getFullYear();
		var app = new Vue({
			el: '#vue-root',
			data: {
				rotate: date.getMonth() + 1,
				year: year,
				weeks: ['一', '二', '三', '四', '五', '六', '日'],
				special: {}
			},
			created: function () {
				axios.get('/pc/school/' + schoolId).then(function (res) {
					var data = res.data.specialDates,
						special = {};
					if (!data) return;
					data.forEach(function (it) {
						special[it] = 1;
					});
					this.special = special;
				}.bind(this));
			},
			methods: {
				setYear: function (change) {
					this.year += change;
				},
				getDate: function (date) {
					return dayjs(new Date(this.year, this.rotate - 1, date));
				},
				recess: function (date) {
					var date0 = this.getDate(date);
					var day = date0.day();
					return (day == 0 || day == 6) ^ this.special[date0.format('YYYY-MM-DD')];
				},
				toggle: function (date) {
					date = this.getDate(date).format('YYYY-MM-DD');
					this.$set(this.special, date, this.special[date] ^ 1);
				},
				submit: function () {
					var list = [];
					for (var key in this.special)
						if (this.special[key])
							list.push(key);
					axios.put('/pc/school', {
						id: schoolId,
						specialDates: list
					}).then(function (res) {
						alert('成功');
						history.back();
					});
				}
			},
			computed: {
				dates: function () {
					return new Date(this.year, this.rotate, 0).getDate();
				},
				days: function () {
					return new Date(this.year, this.rotate - 1, 0).getDay();
				}
			}
		})
	</script>
</body>

</html>